<template>
  <div class="course_container">
    <div class="course_container_left">
      <div class="left_title shou">
        <tooltip position="bottom-start" :text="form.courseName" width="100%"/>
      </div>
      <div class="left_content">
        <div class="left_content_item" v-if="form.courseType != '1'">
          <div class="left_content_item_label65">专业大类</div>
          <div class="left_content_item_value">
            {{ form.majorTypeName }}
          </div>
        </div>
        <div class="left_content_item" v-if="form.courseType != '1'">
          <div class="left_content_item_label65">专业名称</div>
          <div class="left_content_item_value">
            {{ form.majorName }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">课程类型</div>
          <div class="left_content_item_value">
            {{ form.courseTypeName }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">主讲教师</div>
          <div class="left_content_item_value font_w_bold">
            {{ form.principalName }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">辅助教师</div>
          <div class="left_content_item_value">
            {{ form.teacherNames }}
          </div>
        </div>
        <div
          class="left_content_item"
          v-if="
            form.disciplineGroupName && $store.getters.curRole !== 'student'
          "
        >
          <div class="left_content_item_label">学科专业组</div>
          <div class="left_content_item_value">
            {{ form.disciplineGroupName }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">基准学时</div>
          <div class="left_content_item_value color_green">
            {{ form.studyTime }}时
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label">关联工作站</div>
          <div class="left_content_item_value">
            {{ form.workstationNames }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">课程要求</div>
          <div class="left_content_item_value color_red">
            {{
              form.passAllStatus == 1
                ? '所有学生所有考核都通过可结束课程'
                : '学生考核结果不影响结束课程'
            }}
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label65">学习要求</div>
          <div class="left_content_item_value color_red">
            {{
              form.jumpStatus == 1
                ? '强制按照课程内容顺序学习'
                : '不限制课程内容的学习顺序'
            }}
          </div>
        </div>

        <div class="left_content_item">
          <div class="left_content_item_label">学习框架图</div>
        </div>
        <div class="left_content_item" style="display: block">
          <el-image
            v-for="(item, index) in form.framePic"
            class="content_img"
            :preview-src-list="form.framePic ? form.framePic : []"
            :src="item"
            :key="index"
          ></el-image>
        </div>
      </div>
    </div>
    <div class="course_container_right">
      <div class="right_title">详情</div>
      <div class="right_content">
        <div class="right_content_item">
          <div class="right_content_item_label">课程目标</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.teachingObjectives }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">课程描述</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.describe }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">学习内容</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.content }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">教学组织方式</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.teachingMethod }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">工具/材料/设备</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.studyTools }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">学习资料</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.studyData }}
          </div>
        </div>

        <div class="right_content_item">
          <div class="right_content_item_label">教学场地描述</div>
          <div style="width: 670px">
            <div
              class="right_content_item_value"
              style="
                white-space: pre-wrap;
                text-indent: -0.3em;
                word-wrap: break-word;
              "
            >
              {{ form.teachingPlace }}
            </div>
            <div class="img_list" style="margin-left: 13px">
              <el-image
                v-for="(item, index) in form.teachingPlacePic"
                :key="index"
                class="img_list_item"
                v-bind:src="item"
                :preview-src-list="
                  form.teachingPlacePic ? form.teachingPlacePic : []
                "
              >
              </el-image>
            </div>
          </div>
        </div>
        <!-- <div class="right_content_item">
          <div class="right_content_item_label">教学场地</div>
          <div class="right_content_item_value flex_column">
            <div class="img_list">
              <el-image
                v-for="(item, index) in form.teachingPlacePic"
                :key="index"
                class="img_list_item"
                v-bind:src="item"
                :preview-src-list="
                  form.teachingPlacePic ? form.teachingPlacePic : []
                "
              >
              </el-image>
            </div>
          </div>
        </div> -->
        <div class="right_content_item">
          <div class="right_content_item_label">教学考核要求</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.teachingAssessment }}
          </div>
        </div>

        <div class="right_content_item">
          <div class="right_content_item_label">师资团队</div>
          <div
            class="right_content_item_value"
            style="
              white-space: pre-wrap;
              text-indent: -0.3em;
              word-wrap: break-word;
            "
          >
            {{ form.teacherResource }}
          </div>
        </div>

        <div class="right_content_item" v-if="showRoot">
          <div class="right_content_item_label">更多文档</div>
          <div class="right_content_item_value flex_column">
            <div class="img_list">
              <div
                class="view_img"
                v-for="(item, index) in form.moreDoc
                  ? JSON.parse(form.moreDoc)
                  : []"
                :key="index"
              >
                <div
                  @click="lookFiles(item.url, item.name)"
                  v-if="item.type == 3 || item.type == 4"
                  class="other_box"
                >
                  <img class="icon_img" :src="returnIcon(item.url, 1)" alt="加载失败"/>
                  <div class="other_text">
                    <tooltip position="top" :text="item.name" width="100%"/>
                    {{
                      item.name.slice(
                        item.name.lastIndexOf('.'),
                        item.name.length
                      )
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  工学一体化课程————文件上传集合   -->
        <!-- <div class="file_item" v-if="form.talentTrainingProgram && JSON.parse(form.talentTrainingProgram).length>0">
          <div class="file_item_label">1.《人才培养方案》</div>
          <div class="file_item_value">
            <div class="img_list">
              <div class="new_file" v-for="(item,index) in JSON.parse(form.talentTrainingProgram)" :key="index">
                <div @click="lookFiles(item.url,item.name)" v-if="item.type==3 || item.type==4" class="other_box">
                  <img class="icon_img" :src="returnIcon(item.url,1)" alt="加载失败"/>
                  <div class="other_text">
                    <tooltip position="top" :text="item.name" width="100%"/>
                    {{ item.name.slice(item.name.lastIndexOf('.'), item.name.length) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <fileDrawer
        :show.sync="drawer"
        :url="drawerurl"
        :name="drawername"
        :type="drawertype"
      ></fileDrawer>
      <div class="submit_box flexEnd" v-if="$route.query.type == 'audit'">
        <el-button v-preventReClick @click="goBack" type="primary">
          退 出
        </el-button>
        <el-button v-preventReClick @click="reject" type="danger">
          驳回
        </el-button>
        <el-button v-preventReClick @click="auditSussess" type="primary">
          通过审核
        </el-button>
      </div>
      <div class="submit_box flexEnd" v-else>
        <el-button v-preventReClick @click="goBack" type="primary">
          退 出
        </el-button>
      </div>
    </div>
    <!-- 驳回弹框   -->
    <rejectDia
      type="1"
      :open.sync="rejectOpen"
      :propform="form"
      @refresh="goBack()"
    ></rejectDia>
  </div>
</template>

<script>
import videoReview from '@/components/videoReview/videoReview'
import { editCourseStatus } from '@/api/course/course'
import rejectDia from './rejectDia.vue'
import { getPost_school } from '@/api/schoolOrganization/schoolInfo'
import fileDrawer from '@/components/fileDrawer.vue'
import { returnIcon } from '@/utils/util'

export default {
  name: 'courseInfo',
  components: { videoReview, fileDrawer, rejectDia },
  props: {
    showRoot: {
      type: Boolean,
      default: true
    },
    enterType: {
      type: String,
      default: ''
    },
    form: {
      type: [Object]
    },
    status: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    form: {
      handler(val) {
        console.log(val, 'form')
      },
      deep: true
    }
  },
  data() {
    return {
      info: {},
      rejectOpen: false,
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: ''
    }
  },
  methods: {
    /* 驳回 */
    reject() {
      this.rejectOpen = true
    },
    /** 获取学校信息 */
    async getInfo() {
      let res = await getPost_school()
      const { code, data } = res
      if (code == 200) {
        this.info = data
      }
    },
    /* 通过审核 */
    auditSussess() {
      this.$confirm(`是否确认通过审核?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在处理…',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.6)'
          })
          //当分院审核时（this.status == "30"）
          if (this.status == '30') {
            //type  类型:0-高用,1-停用,2-提交审校,了-撤回审校,4-分院审校,5-学校审校,6-驳回
            let params = {
              type: 4,
              courseId: this.form.courseId
            }
            let res = await editCourseStatus(params.type, params.courseId)
            if (res.code == 200) {
              loading.close()
              // 判断审核配置  是否需要学校审核   不需要学校审核则分院直接审核通过
              if (this.info.courseNeedCheckSchool == 1) {
                this.$modal.msgSuccess('审核已通过，待学校审核')
              } else {
                //分院直接审核通过
                this.$modal.msgSuccess('通过审核成功')
              }
              this.$store.dispatch(
                'tagsView/delView',
                this.$router.currentRoute
              )
              setTimeout(() => {
                this.$router.push({ path: '/course/course' })
              }, 100)
            } else {
              loading.close()
            }
          }
          //当学校审核时（this.status == "40"）
          else if (this.status == '40') {
            //学校审核
            //type  类型:0-高用,1-停用,2-提交审校,了-撤回审校,4-分院审校,5-学校审校,6-驳回 7专业组审核
            let params = {
              type: 5,
              courseId: this.form.courseId
            }
            let res = await editCourseStatus(params.type, params.courseId)
            if (res.code == 200) {
              loading.close()
              this.$modal.msgSuccess('通过审核成功')
              this.$store.dispatch(
                'tagsView/delView',
                this.$router.currentRoute
              )
              setTimeout(() => {
                this.$router.push({ path: '/course/course' })
              }, 100)
            } else {
              loading.close()
            }
          }
          // 专业组审核（this.status == "50"）
          else {
            let params = {
              type: 7,
              courseId: this.form.courseId
            }
            let res = await editCourseStatus(params.type, params.courseId)
            if (res.code == 200) {
              loading.close()
              if (this.status == '50') {
                this.$EventBus.$emit('courseStatusRefresh', true)
              }
              // 判断审核配置  是否需要学校审核   不需要学校审核则分院直接审核通过
              if (this.info.courseNeedCheckBranch == 1) {
                this.$modal.msgSuccess('审核已通过，待分院审核')
              } else if (this.info.courseNeedCheckSchool == 1) {
                this.$modal.msgSuccess('审核已通过，待学校审核')
              } else {
                this.$modal.msgSuccess('通过审核成功')
              }
              setTimeout(() => {
                this.$router.back()
              }, 100)
            } else {
              loading.close()
            }
          }
        })
        .catch(() => {
        })
    },
    returnIcon(url, type) {
      return returnIcon(url, type)
    },
    lookFiles(url, name) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (arr.indexOf(uploadType) > -1) {
        this.drawer = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = 1
      } else {
        window.open(url, '_blank')
      }
    },
    goBack() {
      if (this.enterType == 'manager') {
        this.$store.dispatch('tagsView/delView', this.$router.currentRoute)
        setTimeout(() => {
          this.$router.go(-1)
        }, 100)
      } else {
        this.$router.go(-1)
      }
    }
  },
  mounted() {
    if (this.$route.query.type == 'audit') {
      this.getInfo()
    }
  }
}
</script>

<style scoped lang="scss">
.course_container {
  width: 1200px;
  display: flex;

  &_left {
    width: 320px;

    .left_title {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      border-right: 1px solid #eef0f1;
      border-bottom: 1px solid #eef0f1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .left_content {
      width: 100%;
      height: calc(100vh - 305px + 72px);
      overflow: auto;
      padding: 24px 8px 24px 24px;
      box-sizing: border-box;
      border-right: 1px solid #eef0f1;
      border-left: 1px solid #eef0f1;

      &_item {
        display: flex;
        margin-top: 16px;

        &_label {
          width: 92px;
          font-size: 16px;
          font-weight: 400;
          color: #999999;
          line-height: 21px;
        }

        &_label65 {
          width: 65px;
          font-size: 16px;
          font-weight: 400;
          color: #999999;
          line-height: 21px;
        }

        &_value {
          width: 213px;
          font-size: 16px;
          font-weight: 400;
          margin-left: 8px;
          line-height: 21px;
          // white-space: pre-wrap;
          // text-indent: -0.3em;
          word-wrap: break-word;
        }
      }

      &_item:nth-child(1) {
        margin-top: 0;
      }

      .content_img {
        width: 269px;
      }
    }
  }

  &_right {
    width: 880px;

    .right_title {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      border-top: 1px solid #eef0f1;
      border-bottom: 1px solid #eef0f1;
    }

    .right_content {
      width: 100%;
      height: calc(100vh - 305px);
      overflow: auto;
      padding: 24px 40px;
      box-sizing: border-box;
      border-right: 1px solid #eef0f1;

      &_item {
        margin-top: 32px;
        display: flex;

        &_label {
          width: 110px;
          font-size: 16px;
          font-weight: 400;
          text-align: right;
          color: #999999;
        }

        &_value {
          width: calc(100% - 125px);
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          margin-left: 13px;
        }
      }

      &_item:nth-child(1) {
        margin-top: 0;
      }

      .file_item {
        margin-top: 17px;

        &_label {
          width: 100%;
          font-size: 16px;
          font-weight: 400;
          text-align: right;
          color: #999999;
          display: flex;
          justify-content: flex-start;
        }

        &_value {
          padding-left: 110px;
          box-sizing: border-box;
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          margin-left: 13px;
        }
      }
    }
  }
}

.teacher_text {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin: 10px 10px 0 0;
}

.teacher_text:nth-child(-n + 3) {
  margin-top: 0;
}

.workspace {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-top: 16px;
}

.workspace:nth-child(1) {
  margin-top: 0;
}

.color_green {
  color: #28b28b;
}

.color_red {
  color: #e95756;
}

.font_w_bold {
  font-weight: bold !important;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.img_list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &_item {
    width: auto !important;
    height: 101px;
    margin: 10px 10px 0 0;
  }
}

.w_100 {
  width: 100%;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.submit_box {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;

  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    border-radius: 8px;
    line-height: 38px;
    height: 40px;
  }
}

.view_img {
  width: 102px;
  height: 102px;
  border-radius: 8px;
  margin-left: 12px;
  position: relative;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
}

.video_img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
}

.new_file {
  border-radius: 8px;
  margin-left: 12px;
  position: relative;
  width: 40%;
  margin-top: 10px;

  .other_box {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 8px;
    align-items: flex-end;
    cursor: pointer;

    .icon_img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    .other_text {
      width: 200px;
      font-size: 14px;
      color: #565656;
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .close_img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
  }
}
</style>
